<template>
    <div class="Wallet">
        <div class="container" style="background-color: #4D53E0;">
            <p class="title"><strong>ADS仓储钱包</strong><span>(转账、购买会员)</span></p>
            <p><span class="message">该钱包ADS请尽快使用，24小时后超出360的ADS将会被系统销毁，且不会退回费用。最大储存360个ADS</span></p>
            <div class="content f-column f-a-start">
                <strong class="amount DIN-Medium">1989</strong>
                <span class="title">ADS数量</span>
            </div>
        </div>
        <div class="container" style="background-color: #FFC406;">
            <p class="title"><strong>ADS收益钱包</strong><span>(可提现、出售、转账)</span></p>
            <div class="content f-column f-a-center">
                <strong class="amount DIN-Medium">201989</strong>
                <span class="title">ADS数量</span>
            </div>
            <div class="f-row f-j-between">
                <div class="content f-column f-a-center">
                    <strong class="amount DIN-Medium" style="font-size: 0.36rem;">89.1234</strong>
                    <span class="title">ADS数量</span>
                </div>
                <div class="content f-column f-a-center">
                    <strong class="amount DIN-Medium" style="font-size: 0.36rem;">201989.1234</strong>
                    <span class="title">ADS数量</span>
                </div>
            </div>
        </div>
        <div class="container" style="background-color: #41D5E2;">
            <p class="title"><strong>锁仓钱包</strong><span></span></p>
            <p><span class="message">两个月考核通过后会在六个月内全部释放返还</span></p>
            <div class="content f-column f-a-start">
                <strong class="amount DIN-Medium">2000</strong>
                <span class="title">ADS数量</span>
            </div>
        </div>
        <div class="bottom f-row f-j-center f-a-center">
            <div class="submitButton" @click="transferOut">转出</div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator'
    import {NAV_BAR_INFO} from "@/store/MutationTypes";

    @Component({
        name: 'Wallet'
    })
    export default class extends Vue {
        private mounted(): void {
            this.$common.scrollToTop();
            let __this = this;
            this.$store.dispatch(NAV_BAR_INFO, {
                leftItem: {name: '返回', click: () => {
                    __this.$router.push('/user-center');
                    }},
                rightItem: {name: '账单', color: '#666666'}
            })
        }
        private transferOut(): void {
            this.$router.push('/wallet-transfer-out')
        }
    }
</script>

<style scoped lang="less">
    .Wallet {
        padding: 0.2rem 0.3rem 1.8rem 0.3rem;
        & .container {
            padding: 0.44rem;
            background-color: white;
            border-radius: 0.1rem;
            margin-bottom: 0.3rem;
            color: white;
            & p {
                text-align: left;
                & strong {
                    font-size: 0.3rem;
                    margin-right: 0.2rem;
                }
                & span {
                    font-size: 0.24rem;
                }
                & .message {
                    display: inline-block;
                    font-size: 0.2rem;
                    margin: 0.2rem 0;
                }
            }
            & .content {
                padding-top: 0.3rem;
                & .amount {
                    font-weight: 400;
                    font-size: 0.54rem;
                }
                & .title {
                    font-size: 0.24rem;
                }
            }
        }
        & .bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1.74rem;
            background-color: white;
            z-index: 2;
            &:after {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                height: 1px;
                background-image: linear-gradient(
                        0deg,
                        transparent 61%,
                        rgba(0, 0, 0, 0.3) 100%
                );
            }
        }
    }
</style>
